<template>
  <div>
    <div class="w-100 flex" style="height:97.9%">
      <div class="h-100 position-relative" data-bottom style="width:48%;height:100%;padding: 2px;">
        <div id="container" style="height: 100%" />
        <div class="map-legend">
          <div v-for="item in imgList" :key="item.color" class="flex map-legend-item">
            <div class="map-legend-color">
              <img :src="item.url" alt="" />
            </div>
            <div class="">{{ item.type }}</div>
          </div>
        </div>
      </div>
      <div style="width:1%" />
      <div class="h-100 flex-column justify-between" style="width:25%">
        <div data-bottom class="h-33">
          <page-header text="物流加工企业" :ph="220">
            <v-chart v-if="optionWljgqy.isShow" :options="optionWljgqy" />
          </page-header>
        </div>
        <div data-bottom class="h-33">
          <page-header text="农业大户" :ph="220">
            <v-chart v-if="optionNydu.isShow" :options="optionNydu" ref="nydh" />
          </page-header>
        </div>
        <div data-bottom class="h-33">
          <page-header text="农业合作社" :ph="220">
            <v-chart v-if="optionNyhzs.isShow" :options="optionNyhzs" ref="nyhzs" />
          </page-header>
        </div>
      </div>
      <div style="width:1%" />
      <div class="h-100 flex-column justify-between" style="width:25%">
        <div data-bottom class="h-33">
          <page-header text="农资经销商概况" :ph="220">
            <v-chart v-if="optionNzjxsgk.isShow" :options="optionNzjxsgk" ref="nzjxszk" />
          </page-header>
        </div>
        <div data-bottom class="h-33" :ph="220">
          <page-header text="农业企业">
            <v-chart v-if="optionNyqy.isShow" :options="optionNyqy" ref="nyqy" />
          </page-header>
        </div>
        <div data-bottom class="h-33" :ph="220">
          <page-header text="家庭农场">
            <v-chart v-if="optionJtnc.isShow" :options="optionJtnc" ref="jtnc" />
          </page-header>
        </div>
      </div>
    </div>
    <div style="height:2.1%" />
    <Particulars></Particulars>
  </div>
</template>

<script>
import { queryOrganizationList, getTowSideStat, getSingleValue } from '@/api/connector'
import PageHeader from 'header/PageHeader.vue'
import Particulars from 'header/particulars.vue'
import AMap from '@/utils/AMap'
import { createInfoWindow } from '@/utils/app'
import { formatNumber } from '@/utils/app'
export default {
  name: 'Organization',
  components: { PageHeader, Particulars },
  data() {
    return {
      map: null,
      amap: '',
      infoWindow: null,
      p1: null,
      p2: null,
      showIndex: 0,
      mapData: [],
      time: null,
      imgList: [
        {
          url: require('./../../../assets/img/map/1.png'),
          type: '农资'
        },
        {
          url: require('./../../../assets/img/map/2.png'),
          type: '农机'
        },
        {
          url: require('./../../../assets/img/map/3.png'),
          type: '加工'
        },
        {
          url: require('./../../../assets/img/map/4.png'),
          type: '仓储'
        },
        {
          url: require('./../../../assets/img/map/5.png'),
          type: '物流'
        },
        {
          url: require('./../../../assets/img/map/6.png'),
          type: '家庭农场'
        },
        {
          url: require('./../../../assets/img/map/7.png'),
          type: '合作社'
        }
      ],
      optionWljgqy: {
        isShow: false,
        grid: {
          top: 30,
          bottom: 30
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}家'
        },
        yAxis: {
          name: '家',
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
            }
          }
        ]
      },
      optionNzjxsgk: {
        isShow: false,
        grid: {
          top: 30,
          bottom: 30
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}家'
        },
        yAxis: {
          type: 'value',
          name: '家'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
            }
          }
        ]
      },
      optionNydu: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
              htmlStr += seriesName + '：' + formatNumber(value) + '家' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          right: 50,
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '5%',
          top: '25%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          name: '家',
          type: 'value'
        },
        series: [
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            encode: {
              itemName: 'product',
              value: '2015',
              tooltip: '2015'
            },
            label: {
              formatter: function(params) {
                if (params.name !== '') {
                  // return params.name + '\n' + '(' + params.percent + '%)'
                  return params.value + ' 户'
                } else {
                  return ''
                }
              }
            }
          }
        ]
      },
      optionNyqy: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
              htmlStr += seriesName + '：' + formatNumber(value) + '家' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '5%',
          top: '25%',
          containLabel: true
        },
        legend: {
          right: 50,
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          name: '家',
          type: 'value'
        },
        series: [
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            encode: {
              itemName: 'product',
              value: '2015',
              tooltip: '2015'
            },
            label: {
              formatter: function(params) {
                if (params.name !== '') {
                  // return params.name + '\n' + '(' + params.percent + '%)'
                  return params.value + ' 户'
                } else {
                  return ''
                }
              }
            }
          }
        ]
      },
      optionNyhzs: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'
              htmlStr += seriesName + '：' + formatNumber(value) + '家' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          data: ['2011年', '2012年']
        },
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          name: '家',
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: []
        },
        series: []
      },
      optionJtnc: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          shared: true,
          enabled: true, // 是否启用提示框， 默认启用
          formatter: function(params) {
            let mess = ''
            mess = '<div style="width:150px;">' + params[0].marker + params[0].axisValue + '-' + params[0].value + '个</div>'
            return mess
          }
        },
        grid: {
          left: '3%',
          right: '8%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          name: '个',
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            // x轴刻度线
            show: false
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['6号键', '5号键', '4号键', '3号键', '2号键', '1号键'],
          axisLine: {
            // y轴
            show: false
          },
          axisTick: {
            // y轴刻度线
            show: false
          },
          splitLine: {
            // 网格线
            show: false
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: 15,
            data: []
          }
        ]
      }
    }
  },
  created() {
    this.init()
  },
  beforeDestroy() {
    clearTimeout(this.time)
  },
  mounted() {
    this.$nextTick(() => {
      this.initAMap()
      this.queryOrganizationList()
      this.drawMarker()
    })
  },
  methods: {
    init() {
      getSingleValue({ groupCode: 'WLJGQY' }).then((data) => {
        const val = data.body
        const option = this.optionWljgqy
        option.xAxis.data = val.names
        option.series[0].data = val.values
        option.isShow = true
        this.toLink(this, 'jtnc', (params) => {
          this.$router.push({ name: 'Fourstage', query: { code: '000104', typeCode: '家庭农场数', name: 'industrial-base' } })
        })
      })
      getSingleValue({ groupCode: 'NZJXSGK' }).then((data) => {
        const val = data.body
        const option = this.optionNzjxsgk
        option.xAxis.data = val.names
        option.series[0].data = val.values
        option.isShow = true
        this.toLink(this, 'nzjxszk', (params) => {
          this.$router.push({ name: 'Fourstage', query: { code: '000104', typeCode: '农资经销商数', name: 'industrial-base' } })
        })
      })
      getTowSideStat({ groupCode: 'NYDH' }).then((data) => {
        const val = data.body
        const option = this.optionNydu
        option.xAxis.data = val.dateSet
        option.legend.data = val.typeSet
        Object.keys(val.typeValueListMap).forEach((item) => {
          option.series.push({
            name: item,
            type: 'line',
            data: val.typeValueListMap[item]
          })
        })
        option.isShow = true
        // this.toLink(this, 'nydh', (params) => {
        //   this.$router.push({ name: 'Fourstage', query: { code: '000104', typeCode: '家庭农场数', name: this.$route.name } })
        // })
      })
      getTowSideStat({ groupCode: 'NYQY' }).then((data) => {
        const val = data.body
        const option = this.optionNyqy
        option.xAxis.data = val.dateSet
        option.legend.data = val.typeSet
        Object.keys(val.typeValueListMap).forEach((item) => {
          option.series.push({
            name: item,
            type: 'line',
            data: val.typeValueListMap[item]
          })
        })
        option.isShow = true
        this.toLink(this, 'nyqy', (params) => {
          this.$router.push({ name: 'Fourstage', query: { code: '000104', typeCode: '农业企业数', name: 'industrial-base' } })
        })
      })
      getTowSideStat({ groupCode: 'NYHZS' }).then((data) => {
        const val = data.body
        const option = this.optionNyhzs
        option.legend.data = val.typeSet
        option.yAxis.data = val.dateSet
        Object.keys(val.typeValueListMap).forEach((key) => {
          option.series.push({
            name: key,
            type: 'bar',
            data: val.typeValueListMap[key]
          })
        })
        option.isShow = true
        this.toLink(this, 'nyhzs', (params) => {
          this.$router.push({ name: 'Fourstage', query: { code: '000104', typeCode: '农业合作社数', name: 'industrial-base' } })
        })
      })
      getTowSideStat({ groupCode: 'JTNC', typeNum: 1 }).then((data) => {
        const val = data.body
        const option = this.optionJtnc
        option.yAxis.data = val.dateSet
        Object.keys(val.dateValueListMap).forEach((key) => {
          option.series[0].data.push({
            name: key,
            value: val.dateValueListMap[key][0]
          })
        })
        option.isShow = true
        this.toLink(this, 'jtnc', (params) => {
          this.$router.push({ name: 'Fourstage', query: { code: '000104', typeCode: '家庭农场数', name: 'industrial-base' } })
        })
      })
    },
    async initAMap() {
      try {
        this.amap = await AMap()
        this.p1 = new Promise((resolve, reject) => {
          this.map = new this.amap.Map('container', {
            amapizeEnable: true, // 是否监控地图容器尺寸变化
            zoom: 14, // 初始化地图层级
            mapStyle: 'amap://styles/fa9f091b73ec8e37b8b84784a4791559', // 地图样式
            // center: [108.096154, 34.264296] // 初始化地图中心点
            center: [108.096963, 34.263525] // 初始化地图中心点
          })
          resolve(this.map)
        })
      } catch (err) {
        console.error(err)
      }
    },
    drawMarker() {
      Promise.all([this.p1, this.p2])
        .then((result) => {
          this.addMarker(result[1])
        })
        .catch((error) => {
          //console.log(error)
        })
    },
    addMarker(data) {
      const self = this
      // 添加点
      data.map((item) => {
        const coordinate = JSON.parse(item.coordinate)
        let url = ''
        this.imgList.map((d) => {
          if (d.type === item.type) {
            url = d.url
          }
        })
        const marker = new this.amap.Marker({
          map: this.map,
          icon: url,
          position: [coordinate.lng, coordinate.lat]
        })
        marker.on('click', function(e) {
          self.openInfo(e, item)
        })
        self.mapData.push({
          position: [coordinate.lng, coordinate.lat],
          data: item
        })
      })
      self.setMapCenter()
    },
    setMapCenter() {
      const self = this
      this.time = setTimeout(() => {
        self.map.setCenter(self.mapData[self.showIndex].position)
        const lnglat = JSON.parse(self.mapData[self.showIndex].data.coordinate)
        self.openInfo({ lnglat }, self.mapData[self.showIndex].data)
        if (self.showIndex === self.mapData.length - 1) {
          self.showIndex = 0
        } else {
          self.showIndex++
        }
        self.setMapCenter()
      }, 8000)
    },
    openInfo(e, item) {
      const self = this
      const title = '详情'
      const content = []
      content.push('<div class="flex"><div class="w-80">名称:</div><div>' + item.name + '</div></div>')
      content.push('<div class="flex"><div class="w-80">地址:</div><div>' + item.address + '</div></div>')
      content.push('<div class="flex"><div class="w-80">类型:</div><div>' + item.type + '</div></div>')
      content.push('<div class="flex"><div class="w-80">负责人:</div><div>' + item.chargePerson + '</div></div>')
      content.push('<div class="flex"><div class="w-80">联系电话:</div><div>' + item.contactNumber + '</div></div>')
      this.infoWindow = new this.amap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        content: createInfoWindow(title, content.join('<br/>'), self.map),
        offset: new this.amap.Pixel(16, -45)
      })
      this.infoWindow.open(this.map, e.lnglat)
    },
    closeInfoWindow() {
      this.map.clearInfoWindow()
    },
    queryOrganizationList(item) {
      this.p2 = new Promise((resolve, reject) => {
        queryOrganizationList().then((res) => {
          resolve(res.body.data)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.h-33 {
  height: 32%;
}
div[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
  background-size: 100% 100% !important;
}
.h-24 {
  height: 23.2%;
}
.map-legend {
  padding: 12px 18px;
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1000;
  color: #fff;
  border: solid 1px #5c6d7c;
  background: rgba(18, 33, 53, 0.8);
  border-radius: 4px;
}
.map-legend-color {
  width: 34px;
  height: 37px;
  margin-right: 10px;
  margin-top: -10px;
}
.map-legend-color img {
  width: 100%;
  height: 100%;
}
.map-legend-item {
  margin-bottom: 8px;
}
.map-legend-item:last-child {
  margin-bottom: 0;
}
</style>
